/* 
1 发送请求 获取学员信息
  1 根据薪资折线图要求，来构造函数
 */

//获取元素
const toggleBatchBtn = document.querySelector('#toggleBatchBtn');// 获取成绩菜单
const batch = document.querySelector("#batch");

//获取班级概况
async function getStudentOverview() {
    const result = await axios({
        url: "/student/overview",
    });
    const { avgAge, avgSalary, proportion, total } = result.data.data;
    document.querySelector('.avgAge').innerText = avgAge;
    document.querySelector('.avgSalary').innerText = avgSalary;
    document.querySelector('.proportion').innerText = proportion;
    document.querySelector('.total').innerText = total;
}

async function getData() {
    //发送请求
    const result = await axios({ url: "/student/list" });
    //获取 名字数组
    const names = result.data.data.map(v => v.name);
    //获取 期望薪资数组
    const salaries = result.data.data.map(v => v.salary);
    //获取 实际薪资数组  
    const trueSalaries = result.data.data.map(v => v.truesalary);
    //籍贯 和 对应人数
    const hometownList = [];
    result.data.data.forEach(item => {
        //1 判断 item对应省份数据 有没有在hometownList中定义过
        const index = hometownList.findIndex(v => v.name === item.province);
        //2   没有定义过 - 给 hometownList 添加一个新的元素  {name:item.province,value:1}
        if (index === -1) {
            hometownList.push({ value: 1, name: item.province });
        } else {
            //3  定义过  找到 item.province  对应 数据在数组的哪个位置 hometownList[index].value++  
            hometownList[index].value++;
        }
    });

    //获取班级概况
    getStudentOverview()
    //渲染薪资折线图
    renderSalary(names, salaries, trueSalaries);

    // 渲染籍贯饼图
    renderHomeTown(hometownList);

};

// 接收数据来渲染薪资折线图  封装一个名为：renderSalary的函数
function renderSalary(names, salaries, trueSalaries) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line'));

    // 指定图表的配置项和数据
    const option = {
        color: ["red", "blue"],
        title: {
            text: "薪资折线图",
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {},
        // 拖动 类似滚动条
        dataZoom: [
            {
                // 滑块开始的位置
                start: 20,
                // 滑块结束位置
                end: 50,
            },
        ],
        // 工具箱
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: names, // 姓名数组
        },
        yAxis: {
            type: "value",
            axisLabel: {
                formatter: "{value}",
            },
        },
        series: [
            {
                name: "Highest",
                type: "line",
                data: salaries, // 期望薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "red",
            },
            {
                name: "Lowest",
                type: "line",
                data: trueSalaries, // 真实薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "blue",
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

};


//接收成绩批次 来获取对应的成绩数据 -柱形图
async function getSelectByBatch(batch) {
    const result = await axios({
        url: '/score/batch',
        params: {
            batch
        }
    });
    // 解构数据
    // group 组名
    // avgScore 平均分
    // lt60 低于60分
    // gt60 60-80
    // gt80 大于80分
    const { group, avgScore, lt60, gt60, gt80 } = result.data.data;

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(".barChart"));

    // 指定图表的配置项和数据
    const option = {
        // 设置网格 样式来控制大小
        grid: {
            // top 设置 图表距离 顶部距离
            // bottom 设置 图表距离 底部距离
            top: 20,
            bottom: 20,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "#999",
                },
            },
        },

        legend: {
            data: ["平均分", "低于60分人数", "60-80分之间", "高于80分人数"],
        },
        xAxis: [
            {
                type: "category",
                // 组名、
                data: group,
                axisPointer: {
                    type: "shadow",
                },
            },
        ],
        yAxis: [
            // 设置 两个y坐标轴
            {
                type: "value",
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: "{value} 分",
                },
            },
            {
                type: "value",
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: "{value} 人",
                },
            },
        ],
        series: [
            // 每一个对象 ，代表着 每一组数据 蓝色  绿色  折线图-黄色
            {
                name: "平均分",
                type: "bar",
                data: avgScore,
            },
            {
                name: "低于60分人数",
                type: "bar",
                data: lt60,
                // 设置折线图 和 第二个坐标轴向对应！
                yAxisIndex: 1,
            },
            {
                name: "60-80分之间",
                type: "bar",
                // 设置折线图 和 第二个坐标轴向对应！
                yAxisIndex: 1,
                data: gt60,
            },
            {
                name: "高于80分人数",
                type: "bar",
                // 设置折线图 和 第二个坐标轴向对应！
                yAxisIndex: 1,
                data: gt80,
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//给成绩菜单 绑定点击事件
toggleBatchBtn.addEventListener('click', e => {
    // 切换显示 成绩批次面板
    batch.classList.toggle('dashboard-show');
});
// 给二级菜单批次绑定事件
batch.addEventListener('click', e => {
    //判断点击是不是a标签
    if (e.target.nodeName === 'A') {
        //解构id
        const { index } = e.target.dataset;
        getSelectByBatch(index)
    }
});


// 接收数据来渲染籍贯饼图
function renderHomeTown(hometownList) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(".pie"));

    // 指定图表的配置项和数据
    const option = {
        title: {
            text: "籍贯 Hometown",
        },
        series: [
            {
                name: "Nightingale Chart",
                type: "pie",
                radius: [30, 150],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                    borderRadius: 8,
                },
                data: hometownList, // 自己处理过的数据
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


getData();
//批次成绩 - 柱形图 
getSelectByBatch(1)